@media screen and (max-width: 1550px) and (min-width: 1250px) {
  #app {
    // 主页
    .index {
      .main {
        .container {
          width: 1100px;
        }
      }
    }
    .body-main {
      width: 88%;
    }
    // 文章单页面
    >.article{
        .main{
            .banner{
                height: 555px;
            }
         .container {
            padding: 20px 20px;
            > .article-body{
                width: 80%;
            }
        }   
        } 
        
    }
    // 关于
.about {
    .banner{
    height: 250px;
}
.body-main{
    width: 1200px;
}
}
  }
}
@media screen and (max-width: 1250px) and (min-width: 1050px) {
  #app {
    // 主页
    .index {
      .main {
        .pic {
          height: 60vh;
        }
        .container {
          width: 95%;
          padding: 20px 0;
          margin: 0 auto;
          > .box {
            width: 100%;
            .left {
              width: 64%;
              .selected-articles .card-body > .card-articles > li {
                > .card-articles-left {
                  display: none;
                }
              }
              > .card-articles-right {
                width: 100%;
              }
              .all-articles .article-body .body-right > div a > button {
                display: none;
              }
              .all-articles .article-body .body-left > div > img{
                height: 100%;
              }
            }
            .right {
              width: 35%;
            }
          }
        }
      }
    }
    // 心情、关于、网站导航

    .body-main {
      width: 90%;
    }
    // 文章单页面
  >.article{
    >.main{
        .banner{
            height: 410px;
        }
       .container {
        padding: 20px 15px;
        > .article-body{
            width: 80%;
        }
    } 
    } 
    
}
// 项目界面
.proPic{
    height: 400px;
}
// 关于
.about .banner{
    height: 200px;
}
  }
  
}

@media screen and (max-width: 1050px) and (min-width: 900px) {
  #app {
    > .index {
      > .main {
        .pic {
          height: 60vh;
        }
        .container {
          width: 95%;
          padding: 20px 0;
          margin: 0 auto;
          > .box {
            width: 100%;
            .right {
              display: none;
            }
            .left {
              width: 100%;
            }
          }
        }
      }
    }

    // 心情、关于、网站导航

    .body-main {
      width: 85%;
    }
    //   网址导航页面
    > .webs .body-main > .web-list {
      width: calc((100% - 40px) / 2);
    }
    // 项目界面
.proPic{
    height: 300px;
}
// 关于
.about .banner{
    height: 150px;
}
    // 文章单页面
    .article{
        .main {

            .banner{
                height: 330px;
            }.container {
            padding: 20px 5px;
            > .article-body{
                width: 80%;
            }
        }
        }
        
    }
  }
}
